<template>
	<!-- 轮播 -->
	<view class="banner-swiper-box mb10" v-if="detail.list">
		<view class="undervbacl"></view>
		<swiper class="swiper" circular @change="swiperChange" autoplay interval="5000" previous-margin="50rpx" next-margin="50rpx">
			<swiper-item v-for="(item, index) in detail.list" :key="index" class="carousel-item " @tap="routerTo(item.path)">
				<image class="pic" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	/**
	 * 自定义之轮播卡片
	 * @property {Object} detail - 轮播信息
	 */
	export default {
		components: {},
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				webviewId: 0,
				routerTo: this.$tools.routerTo,
				current: 0
			};
		},
		props: {
			detail: {
				type: Object,
				default: null
			}
		},
		computed: {},
		created() {
		},
		methods: {
			// 轮播切换
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 路由跳转
			jump(path, parmas) {
				console.log(path)
				console.log(parmas)
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	// .hide-canvas {
	// 	position: fixed !important;
	// 	top: -99999upx;
	// 	left: -99999upx;
	// 	z-index: -99999;
	// }

	// 轮播
	// .banner-swiper-box {
	// 	// background:  #6ec0ff;
	// 	// border-radius: 0,0,50%,50%;
	// }

	.swiper {
		width: 750rpx;
		height: 500rpx;
		padding-top: 150rpx;
		// #ifdef MP-WEIXIN
		padding-top: 250rpx;
		// #endif
	}

	.pic {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		transform: scale(0.94, 0.88);
		transition: transform .36s;

		&.current {
			transform: scale(1);
		}
	}

	.undervbacl {
		position: absolute;
		background: #6ec0ff;
		width: 750rpx;
		height: 300rpx;
		// #ifdef MP-WEIXIN
		height: 350rpx;
		// #endif
	}

	.undervbacl::after {
		position: absolute;
		display: block;
		background: #6ec0ff;
		left: 0;
		right: 0;
		bottom: -25rpx;
		content: "";
		z-index: 0;
		height: 50rpx;
		width: 100%;
		border-radius: 50%;
		box-shadow: 0px 10px 20px #aaaaaa;
	}
</style>
e>
